<template>
    <div class="app-container">
        <el-col :span="18" :offset="3" :xs="24">
            <el-card class="EmployeeTransfer_edit" v-if="editFlag">
                <div slot="header" class="clearfix">
                    <span>员工调动申请</span>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请日期" prop="applyDate">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请人" prop="applyPartyId">
                                <span>{{ applyerFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工姓名" prop="partyId" filterable>
                                <el-select v-model="form.partyId" placeholder="请选择员工姓名" filterable>
                                    <el-option v-for="dict in partyIdOptions" :key="dict.partyId" :label="dict.firstName"
                                        :value="dict.partyId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="调动日期" prop="transferDate">
                                <el-date-picker clearable v-model="form.transferDate" type="date" value-format="yyyy-MM-dd"
                                    placeholder="请选择调动日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动类型" prop="transferType">
                                <el-select v-model="form.transferType" placeholder="请选择调动类型">
                                    <el-option v-for="dict in transferTypeOptions" :key="dict.enumCode"
                                        :label="dict.description" :value="dict.enumCode"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动前部门" prop="fromDept" filterable>
                                <el-select v-model="form.fromDept" placeholder="请选择调动前部门" filterable>
                                    <el-option v-for="dict in fromDeptOptions" :key="dict.deptId" :label="dict.deptName"
                                        :value="dict.deptId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="调动后部门" prop="toDept" filterable>
                                <el-select v-model="form.toDept" placeholder="请选择调动后部门" filterable>
                                    <el-option v-for="dict in toDeptOptions" :key="dict.deptId" :label="dict.deptName"
                                        :value="dict.deptId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动前岗位" prop="fromPosition" filterable>
                                <el-select v-model="form.fromPosition" placeholder="请选择调动前岗位" filterable>
                                    <el-option v-for="dict in fromPositionOptions" :key="dict.postId" :label="dict.postName"
                                        :value="dict.postId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="调动后岗位" prop="toPosition" filterable>
                                <el-select v-model="form.toPosition" placeholder="请选择调动后岗位" filterable>
                                    <el-option v-for="dict in toPositionOptions" :key="dict.postId" :label="dict.postName"
                                        :value="dict.postId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="调用事由" prop="reason">
                                <el-input v-model="form.reason" type="textarea" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="交接人" prop="joinPartyId" filterable>
                                <el-select v-model="form.joinPartyId" placeholder="请选择交接人" filterable>
                                    <el-option v-for="dict in joinPartyIdOptions" :key="dict.partyId"
                                        :label="dict.firstName" :value="dict.partyId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="附件" prop="affixFilePath">
                                <el-input v-model="form.affixFilePath" placeholder="请输入附件" />
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批人" prop="approver">
                                <LoadUserSelect :placeholder="'请选择审批人'" @getSelectedCourt="getSelectedApprover">
                                </LoadUserSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="EmployeeTransfer_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span>员工调动申请</span>
                    <el-button v-if="applyFlag" style="float: right; padding: 3px 0" type="text"
                        @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请日期" prop="applyDate">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请人" prop="applyPartyId">
                                <span>{{ applyerFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="partyId">
                                <span>{{ personFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="调动日期" prop="transferDate">
                                <span>{{ form.transferDate }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动类型" prop="transferType">
                                <span>{{ transferTypeFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动前部门" prop="fromDept">
                                <span>{{ fromDeptFormat(form) }}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="调动后部门" prop="toDept">
                                <span>{{ toDeptFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="调动前岗位" prop="fromPosition">
                                <span>{{ fromPositionFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        、
                        <el-col :span="12">
                            <el-form-item label="调动后岗位" prop="toPosition">
                                <span>{{ toPositionFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="调用事由" prop="reason">
                                <span>{{ form.reason }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="交接人" prop="joinPartyId">
                                <span>{{ joinPartyIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="附件" prop="affixFilePath">
                                <span>{{ form.affixFilePath }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row>
                        <!-- <el-col :span="12">
                            <el-form-item label="审批状态" prop="flowStatus">
                                <span>{{ flowStatusFormat(form) }}</span>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item label="审批人" prop="approver">
                                <span>{{ approverFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" v-if="applyFlag">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
        </el-col>
    </div>
</template>

<script>
import LoadUserSelect from "@/components/LoadUserSelect";
// person enum api
import { getPersonEnum } from "@/api/ehr/person";
import { addEmployeeTransfer, updateEmployeeTransfer, approvalEmployeeTransfer } from "@/api/ehr/employeeTransfer";
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";
// 审批组件
import Approve from "@/components/Approve";

export default {
    components: { LoadUserSelect, Approve },
    name: "EmployeeTransfer_apply",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 人员字典
            personOptions: [],
            // 员工姓名业务字典
            partyIdOptions: [],
            // 调动类型业务字典
            transferTypeOptions: [],
            // 调动前部门业务字典
            fromDeptOptions: [],
            // 调动后部门业务字典
            toDeptOptions: [],
            // 调动前岗位业务字典
            fromPositionOptions: [],
            // 调动后岗位业务字典
            toPositionOptions: [],
            // 交接人业务字典
            joinPartyIdOptions: [],
            // 交接状态业务字典
            joinStatusOptions: [],
            // 审批状态业务字典
            flowStatusOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: false,
            // 操作标识,用于区分编辑状态
            editFlag: true,
            // 业务申请标识
            applyFlag: true,
            // 业务审批标识
            approveFlag: false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                partyId: [
                    { required: true, message: "员工姓名不能为空", trigger: "change" }
                ],

                transferType: [
                    { required: true, message: "调动类型不能为空", trigger: "change" }
                ],

                approver: [
                    { required: true, message: "审批人不能为空", trigger: "blur" }
                ],

            }
        };
    },
    created() {
        this.reset();
        // 为申请时间默认赋值
        this.form.applyDate = this.parseTime(
            new Date(),
            "{y}-{m}-{d} {h}:{i}:{s}"
        );
        // 为申请人默认值
        this.form.applyPartyId = this.$store.state.user.partyId;
        // 审批人默认值
        this.form.approver = this.$store.state.user.defaultApprover;
        // 人员字典
        getPersonEnum().then((response) => {
            this.personOptions = response.data;
        });
        // 员工姓名业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
            this.partyIdOptions = response.data;
        });
        // 调动类型业务字典
        this.getEnumDicts("TRANSFER_TYPE").then((response) => {
            this.transferTypeOptions = response.data;
        });
        // 调动前部门业务字典
        this.getEntityDicts("SysDept:deptId:deptName").then((response) => {
            this.fromDeptOptions = response.data;
        });
        // 调动后部门业务字典
        this.getEntityDicts("SysDept:deptId:deptName").then((response) => {
            this.toDeptOptions = response.data;
        });
        // 调动前岗位业务字典
        this.getEntityDicts("SysPost:postId:postName").then((response) => {
            this.fromPositionOptions = response.data;
        });
        // 调动后岗位业务字典
        this.getEntityDicts("SysPost:postId:postName").then((response) => {
            this.toPositionOptions = response.data;
        });
        // 交接人业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
            this.joinPartyIdOptions = response.data;
        });
        // 审批状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.flowStatusOptions = response.data;
        });
        var procInsId = this.$route.query && this.$route.query.procInsId;
        if (procInsId) {
            this.editFlag = false;
            this.detailFlag = true;
            // 业务申请标识
            this.applyFlag = false;
            // 审批标识
            this.approveFlag = true;

            // 获取任务ID
            var taskId = this.$route.query && this.$route.query.taskId;
            // 获取表单参数
            this.getApproveFormParams(taskId, procInsId);
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.user; //当前登录用户信息
        },
    },
    methods: {
        // 获取审批表单变量
        getApproveFormParams(taskId, procInsId) {
            // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
            if (taskId) {
                getProcessVariables(taskId).then((res) => {
                    this.form = res.data.businessMap;
                });
            } else {
                // 2.从业务流水表获取工作流表单参数
                getBusinessLog(procInsId).then((response) => {
                    if (response.data) {
                        this.form = JSON.parse(response.data.busiContentJson);
                    }
                });
            }
        },

        // 审批人选择赋值
        getSelectedApprover(e) {
            this.form.approver = e;
        },
        // 人员字典转换
        personFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.name;
                }
            });
            return val;
        },
        // 人员字典转换
        applyerFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.applyPartyId === item.partyId) {
                    val = item.name;
                }
            });
            return val;
        },
        // 审批人字典转换
        approverFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.approver === item.userId + "") {
                    val = item.firstName;
                }
            });
            return val;
        },
        partyIdFormat(row, column) {
            let val = null;
            this.partyIdOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        transferTypeFormat(row, column) {
            let val = null;
            this.transferTypeOptions.forEach((item, index) => {
                if (row.transferType === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        fromDeptFormat(row, column) {
            let val = null;
            this.fromDeptOptions.forEach((item, index) => {
                if (row.fromDept === item.deptId) {
                    val = item.deptName;
                }
            });
            return val;
        },
        toDeptFormat(row, column) {
            let val = null;
            this.toDeptOptions.forEach((item, index) => {
                if (row.toDept === item.deptId) {
                    val = item.deptName;
                }
            });
            return val;
        },
        fromPositionFormat(row, column) {
            let val = null;
            this.fromPositionOptions.forEach((item, index) => {
                if (row.fromPosition === item.postId) {
                    val = item.postName;
                }
            });
            return val;
        },
        toPositionFormat(row, column) {
            let val = null;
            this.toPositionOptions.forEach((item, index) => {
                if (row.toPosition === item.postId) {
                    val = item.postName;
                }
            });
            return val;
        },
        joinPartyIdFormat(row, column) {
            let val = null;
            this.joinPartyIdOptions.forEach((item, index) => {
                if (row.joinPartyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        flowStatusFormat(row, column) {
            let val = null;
            this.flowStatusOptions.forEach((item, index) => {
                if (row.flowStatus === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                transferId: null,
                applyPartyId: null,
                applyDate: null,
                partyId: null,
                transferType: null,
                transferDate: null,
                fromDept: null,
                toDept: null,
                fromPosition: null,
                toPosition: null,
                reason: null,
                joinPartyId: null,
                joinStatus: "0",
                affixFilePath: null,
                statusId: null,
                flowInstId: null,
                flowStatus: null,
                approver: null,
                lastUpdatedStamp: null,
                lastUpdatedTxStamp: null,
                createdStamp: null,
                createdTxStamp: null,
                deptId: null,
                orgId: null
            };
            //this.resetForm("form");
        },

        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.transferId != null && this.updateFlag) {
                        updateEmployeeTransfer(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                        });
                    } else {
                        addEmployeeTransfer(this.form).then(response => {
                            this.form.transferId = response.data.transferId;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                        });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;

                    approvalEmployeeTransfer(this.form).then((response) => {
                        this.$modal.msgSuccess("申请提交成功！");
                        this.open = false;
                    });
                    this.loading = false;

                    this.close();
                }
            });
        },

        /** 编辑 */
        edit() {
            this.editFlag = true;
            this.detailFlag = false;
        },
        resetForm() {
            this.$refs['form'].resetFields()
        },
        close() {
            this.$tab.closePage();
        },

    }
};
</script>
